<template>
    <div class="main-border">
        <el-menu :default-active="mode.toString()" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item index="0">待审核的二手物品</el-menu-item>
            <el-menu-item index="1">上线的二手物品</el-menu-item>
            <el-menu-item index="2">下架的二手物品</el-menu-item>
        </el-menu>

        <!-- 待审核商品 -->
        <el-table v-if="mode == 0" :data="pendingGoods" stripe style="width: 100%; color: #5a5c61;">
            <el-table-column prop="releaseTime" label="发布日期" width="200"></el-table-column>
            <el-table-column prop="idleName" label="二手物品名称" show-overflow-tooltip></el-table-column>
            <el-table-column prop="user.nickname" label="发布用户" width="100"></el-table-column>
            <el-table-column prop="idlePrice" label="价格" width="100"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" type="success" @click="approveGoods(scope.$index)">通过审核</el-button>
                    <el-button size="mini" type="danger" @click="rejectGoods(scope.$index)">驳回</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 上线商品 -->
        <el-table v-if="mode == 1" :data="onlineGoods" stripe style="width: 100%; color: #5a5c61;">
            <el-table-column prop="releaseTime" label="发布日期" width="200"></el-table-column>
            <el-table-column prop="idleName" label="二手物品名称" show-overflow-tooltip></el-table-column>
            <el-table-column prop="user.nickname" label="发布用户" width="100"></el-table-column>
            <el-table-column prop="idlePrice" label="价格" width="100"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" type="danger" @click="makeOfflineGoods(scope.$index)">违规下架</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 下架商品 -->
        <el-table v-if="mode == 2" :data="OfflineGoods" stripe style="width: 100%; color: #5a5c61;">
            <el-table-column prop="releaseTime" label="发布日期" width="200"></el-table-column>
            <el-table-column prop="idleName" label="二手物品名称" show-overflow-tooltip></el-table-column>
            <el-table-column prop="user.nickname" label="发布用户" width="100"></el-table-column>
            <el-table-column prop="idlePrice" label="价格" width="100"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" type="danger" @click="deleteGoods(scope.$index)">永久删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="block">
            <el-pagination
                @current-change="handleCurrentChange"
                :current-page.sync="nowPage"
                :page-size="8"
                background
                layout="prev, pager, next, jumper"
                :total="total"
            ></el-pagination>
        </div>
    </div>
</template>

<script>
// 定义状态枚举
const STATUS_CHECK = {
    APPROVED: "APPROVED",
    PENDING: "PENDING",
    REJECTED: "REJECTED"
};

export default {
    name: "IdleGoods",
    data() {
        return {
            mode: 1,
            nowPage: 1,
            total: 0,
            onlineGoods: [],
            OfflineGoods: [],
            pendingGoods: [],
        };
    },
    created() {
        this.getOnlineGoods();
    },
    methods: {
        handleCurrentChange(val) {
            this.nowPage = val;
            this.fetchData();
        },
        handleSelect(val) {
            if (this.mode !== parseInt(val)) {
                this.mode = parseInt(val);
                this.nowPage = 1;
                this.fetchData();
            }
        },
        fetchData() {
            if (this.mode === 0) {
                this.getPendingGoods();
            } else if (this.mode === 1) {
                this.getOnlineGoods();
            } else if (this.mode === 2) {
                this.getOfflineGoods();
            }
        },
        // 获取已上线（mode = 1）
        getOnlineGoods() {
            this.$api.getGoods({
                //statusSold: "ON_SALE",
                statusCheck: "APPROVED",
                page: this.nowPage,
                nums: 8
            }).then(res => {
                if (res.status_code === 1) {
                    this.onlineGoods = res.data.list.map(item => ({
                        id: item.productID,
                        idleName: item.productName,
                        idlePrice: item.productPrice,
                        releaseTime: item.createdAt,
                        user: {
                            nickname: "用户#" + item.userId
                        }
                    }));
                    this.total = res.data.count;
                } else {
                    this.$message.error(res.msg);
                }
            });
        },
        // 获取被下架（mode = 2）
        getOfflineGoods() {
            this.$api.getGoods({
                //statusSold: "OFF_SALE",
                statusCheck: "REJECTED",
                page: this.nowPage,
                nums: 8
            }).then(res => {
                if (res.status_code === 1) {
                    this.OfflineGoods = res.data.list.map(item => ({
                        id: item.productID,
                        idleName: item.productName,
                        idlePrice: item.productPrice,
                        releaseTime: item.createdAt,
                        user: {
                            nickname: "用户#" + item.userId
                        }
                    }));
                    this.total = res.data.count;
                } else {
                    this.$message.error(res.msg);
                }
            });
        },
        // 获取待审核（mode = 0）
        getPendingGoods() {
            this.$api.getGoods({
                statusCheck: "PENDING",
                page: this.nowPage,
                nums: 8
            }).then(res => {
                if (res.status_code === 1) {
                    this.pendingGoods = res.data.list.map(item => ({
                        id: item.productID,
                        idleName: item.productName,
                        idlePrice: item.productPrice,
                        releaseTime: item.createdAt,
                        user: {
                            nickname: "用户#" + item.userId
                        }
                    }));
                    this.total = res.data.count;
                } else {
                    this.$message.error(res.msg);
                }
            });
        },
        makeOfflineGoods(i) {
            this.$api.updateGoods({ id: this.onlineGoods[i].id, statusCheck: STATUS_CHECK.REJECTED }).then(res => {
                if (res.status_code === 1) {
                    this.getOnlineGoods();
                } else {
                    this.$message.error(res.msg);
                }
            });
        },
        deleteGoods(i) {
            this.$api.deleteGoods({ id: this.OfflineGoods[i].id }).then(res => {
                if (res.status_code === 1) {
                    this.$message.success("删除成功");
                    this.getOfflineGoods(); // 刷新列表
                } else {
                    this.$message.error(res.msg);
                }
            });
        },
        approveGoods(i) {
            this.$api.updateGoods({ id: this.pendingGoods[i].id, statusCheck: STATUS_CHECK.APPROVED }).then(res => {
                if (res.status_code === 1) {
                    this.getPendingGoods();
                } else {
                    this.$message.error(res.msg);
                }
            });
        },
        rejectGoods(i) {
            this.$api.updateGoods({ id: this.pendingGoods[i].id, statusCheck: STATUS_CHECK.REJECTED }).then(res => {
                if (res.status_code === 1) {
                    this.getPendingGoods();
                } else {
                    this.$message.error(res.msg);
                }
            });
        },
    },
};
</script>

<style scoped>
.main-border {
    background-color: #fff;
    padding: 10px 30px;
    box-shadow: 0 1px 15px -6px rgba(0, 0, 0, 0.5);
    border-radius: 5px;
}
.block {
    display: flex;
    justify-content: center;
    padding-top: 15px;
    padding-bottom: 10px;
    width: 100%;
}
</style>
